<style type="text/css">
	span.high-set{
		cursor:pointer;
		display:inline-block;
		margin-right:110px;
		width:40px;
		line-height:20px;
		color:#FE8F19;
		font-size: 16px;
	}
	label.wifi-title{
		margin-top:5px;
	}
	div.high-top{
		border-top:0px solid #DDD;
		border-bottom:2px solid #FF8000;
		padding:10px 0px 0;
	}
	img.high-tip{
		position:absolute;
		width:100px;
		height:100px;
		right:0px;
		bottom:10px;
		background-size:contain;
	}
	ul.high-con{
		position:relative;
	}
	label.high-left{
		left:0px;
	}
	ul.ul-bottom{
		height:30px;
		border-bottom:1px solid #DDD;
	}
	input.btn-save{
		margin-top:20px;
	}
	ul.ul-border{
		border-bottom:1px solid #DDD;
		margin: 10px 50px 10px;
	}
	p.desc-color{
		color:#909396;
		padding:15px 0;
	}
	ul.set-con-top{
		margin:25px 50px 10px;
	}
	div.switch-con-height{
		height:45px;
		border-bottom:2px solid #FF8000;
	}
	/*1080p*/
	@media screen and (min-device-width:1920px){
		span.high-set {
			font-size:20px;
			margin-right:154px;
		}
		ul.set-con-top {
			margin-top:37px;
		}
		div.switch-con-height {
			height:57px;
		}
		p.desc-color {
			padding: 19px 0;
		}
		img.high-tip{
			width:200px;
			height:200px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			wireless = {smart_connect = {}, wifi_2g_config = {}, wifi_5g_config = {}},
			wisp = {config = {}},
			dev_feature = {wifi_2g = {}, wifi_5g = {}}
		}

		local data = tpl_get_data(para, true)
	-%>

	var wirelessInfo = <%=data%>;
	var seniorStatus = 0;

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var smartConnect = ret.wireless.smart_connect;
		var wireless2G = ret.wireless.wifi_2g_config;
		var wireless5G = ret.wireless.wifi_5g_config;
		var wispStatus = ret.wisp.config;
		$("#Ssid2G").val(wireless2G.ssid);
		$("#Ssid5G").val(wireless5G.ssid);
		$("#Pwd2G").val(wireless2G.password);
		$("#Pwd5G").val(wireless5G.password);

		initSwitch("Two2One", smartConnect.enable, function(state, init){
			if (0 == state){
				$("#Wifi5G").show();
				$("#WifiName").html(label.wifi2G);
			}else{
				$("#Wifi5G").hide();
				$("#WifiName").html(label.wifiName);
				closeNote();
			}

			if (!init){
				$("#Ssid5G").val(getStrInMaxByte($("#Ssid2G").val(), 29) + "_5G");
			}
		});

		if ("1" == wispStatus.enable && "0" == wispStatus.band){
			$("#Senior2G").hide();
			$("#Senior5G").show();
		}else if("1" == wispStatus.enable && "1" == wispStatus.band){
			$("#Senior5G").hide();
			$("#Senior2G").show();
		}else{
			$("#Senior2G").show();
			$("#Senior5G").show();
		}

		var selBandWidth2G = id("BandWidth2G");
		var wifiMode2G = [{name:label.wifiBmode, value:0},
					   {name:label.wifiGmode, value:1},
					   {name:label.wifiNmode, value:2}];

		var hashList2G = [label.bandWidth2,
					   label.bandWidth24,
					   label.bandWidth4];
		var bandWidthN2G = [];
		var width2G = ret.dev_feature.wifi_2g.band_width;

		for (var i = 0; i < width2G.length; i++){
			bandWidthN2G.push({name : hashList2G[width2G[i]], value : width2G[i]});
		}

		var bandWidthBG2G = [{name:label.bandWidth2, value:0}];

		initSelect("BandWidth2G", bandWidthN2G, wireless2G.band_width);

		initSelect("WifiMode2G", wifiMode2G, wireless2G.mode, function(val, init){
			if ("1" == val){
				selBandWidth2G.resetOptions(bandWidthBG2G, 0);
			}else{
				selBandWidth2G.resetOptions(bandWidthN2G, wireless2G.band_width);
			}
		});

		var channel2G = [{name:label.auto, value:0},
					   {name:1, value:1},
					   {name:2, value:2},
					   {name:3, value:3},
					   {name:4, value:4},
					   {name:5, value:5},
					   {name:6, value:6},
					   {name:7, value:7},
					   {name:8, value:8},
					   {name:9, value:9},
					   {name:10, value:10},
					   {name:11, value:11},
					   {name:12, value:12},
					   {name:13, value:13}];

		initSelect("Channel2G", channel2G, wireless2G.channel);

		var wifiMode5G = [{name:label.wifiAmode, value:0},
					   {name:label.wifiCmode, value:1}];

		initSelect("WifiMode5G", wifiMode5G, wireless5G.mode);

		var selBandWidth5G = id("BandWidth5G");
		var bandWidth5GLess = [{name:label.bandWidth2, value:0}];

		var hashList5G = [label.bandWidth2,
					   label.bandWidth4,
					   label.bandWidth8,
					   label.bandWidth248,
					   label.bandWidth24];
		var bandWidth5G = [];
		var width5G = ret.dev_feature.wifi_5g.band_width;

		for (var i = 0; i < width5G.length; i++){
			bandWidth5G.push({name : hashList5G[width5G[i]], value : width5G[i]});
		}

		initSelect("BandWidth5G", bandWidth5G, wireless5G.band_width);

		var channel5G = [{name:label.auto, value:0},
					   {name:36, value:36},
					   {name:40, value:40},
					   {name:44, value:44},
					   {name:48, value:48},
					   {name:149, value:149},
					   {name:153, value:153},
					   {name:157, value:157},
					   {name:161, value:161},
					   {name:165, value:165}];

		initSelect("Channel5G", channel5G, wireless5G.channel, function(val, init){
			if ("165" == val){
				selBandWidth5G.resetOptions(bandWidth5GLess, 0);
			}else{
				selBandWidth5G.resetOptions(bandWidth5G, wireless5G.band_width);
			}
		});

		initSwitch("Switch2G", wireless2G.enable);
		initSwitch("HideSsid2G", wireless2G.hidden);
		initSwitch("WifiIsolation2G", wireless2G.ap_isolate);
		initSwitch("Switch5G", wireless5G.enable);
		initSwitch("HideSsid5G", wireless5G.hidden);
		initSwitch("WifiIsolation5G", wireless5G.ap_isolate);
	}

	init(wirelessInfo);

	$("#SeniorSet").click(function(){
		if (seniorStatus == 1){
			$("#WirelessSenior").hide();
			$("#SeniorSet").text(label.openSenior);
			seniorStatus = 0;
		}else{
			$("#WirelessSenior").show();
			$("#SeniorSet").text(label.closeSenior);
			seniorStatus = 1;
		}
	});

	$("#Save").click(function(){
		if (1 == $("#Two2One").attr("data-value")){
			$("#Ssid5G").val($("#Ssid2G").val());
			$("#Pwd5G").val($("#Pwd2G").val());
			$("#Switch5G").attr("data-value" , $("#Switch2G").attr("data-value"));
			$("#HideSsid5G").attr("data-value" , $("#HideSsid2G").attr("data-value"));
		}

		if ($("#Ssid2G").val() == $("#Ssid5G").val()
			&& $("#Pwd2G").val() != $("#Pwd5G").val()){
			showNote(errStr.sameWifiPwd);
			return false;
		}

		if (0 == $("#Switch2G").attr("data-value")
			&& 0 == $("#Switch5G").attr("data-value")){
			showConfirm(errStr.closeWifi, function(choose){
				if (choose){
					saveWifi();
				}
			});
		}else{
			if ((1 == $("#Switch2G").attr("data-value") && $("#Pwd2G").val() == "")
				|| (1 == $("#Switch5G").attr("data-value") && $("#Pwd5G").val() == "")){
				showConfirm(errStr.emptyWifiPwd, function(choose){
					if (choose){
						saveWifi();
					}
				});
			}else{
				saveWifi();
			}
		}
	});

	function saveWifi(){
		var para = {};
		var smart_connect = {};
		var wifi_2g_config = {};
		var wifi_5g_config = {};
		para.wireless = {};
		para.wireless.smart_connect = smart_connect;
		para.wireless.wifi_2g_config = wifi_2g_config;
		para.wireless.wifi_5g_config = wifi_5g_config;
		smart_connect.enable = $("#Two2One").attr("data-value");
		wifi_2g_config.enable = $("#Switch2G").attr("data-value");
		wifi_2g_config.ssid = $("#Ssid2G").val();
		wifi_2g_config.password = $("#Pwd2G").val();
		wifi_2g_config.hidden = $("#HideSsid2G").attr("data-value");
		wifi_2g_config.mode = $("#WifiMode2G").attr("data-value");
		wifi_2g_config.channel = $("#Channel2G").attr("data-value");
		wifi_2g_config.band_width = $("#BandWidth2G").attr("data-value");
		wifi_2g_config.ap_isolate = $("#WifiIsolation2G").attr("data-value");
		wifi_5g_config.enable = $("#Switch5G").attr("data-value");
		wifi_5g_config.ssid = $("#Ssid5G").val();
		wifi_5g_config.password = $("#Pwd5G").val();
		wifi_5g_config.hidden = $("#HideSsid5G").attr("data-value");
		wifi_5g_config.mode = $("#WifiMode5G").attr("data-value");
		wifi_5g_config.channel = $("#Channel5G").attr("data-value");
		wifi_5g_config.band_width = $("#BandWidth5G").attr("data-value");
		wifi_5g_config.ap_isolate = $("#WifiIsolation5G").attr("data-value");

		if (errHandle(checkSsid2G(wifi_2g_config.ssid), smart_connect.enable)){
			return;
		}

		if (errHandle(checkPwd2G(wifi_2g_config.password), smart_connect.enable)){
			return;
		}

		if (errHandle(checkSsid5G(wifi_5g_config.ssid), smart_connect.enable)){
			return;
		}

		if (errHandle(checkPwd5G(wifi_5g_config.password), smart_connect.enable)){
			return;
		}

		showLoading(label.saveWifi);
		apiSet(para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = max(ret[K_MODULE].wireless.smart_connect.wait_time, ret[K_MODULE].wireless.wifi_2g_config.wait_time,
								ret[K_MODULE].wireless.wifi_5g_config.wait_time);
				$.setTimeout(function(){
					stateman.go("pc.wifiSet");
				}, time * 1000);
			}else{
				errHandle(code, smart_connect.enable);
				closeLoading();
			}
		});
	}

	function errHandle(code, smartCode){
		var noteStr = "";
		if (smartCode == 0){
			switch(code){
			case E_NONE:
				return false;
			case E_WL2GSSIDBLANK:
				noteStr = errStr.ssidEmpty2G;
				break;
			case E_WL2GSSIDLEN:
				noteStr = errStr.ssidLength2G;
				break;
			case E_WL2GSSIDILLEGAL:
				noteStr = errStr.ssidInclSpeChar2G;
				break;
			case E_WL2GSSIDPWLEN:
				noteStr = errStr.ssidPwdLength2G;
				break;
			case E_WL2GSSIDPWILLEGAL:
				noteStr = errStr.ssidPwdInclSpeChar2G;
				break;
			case E_WL2GSSIDCONFICTWITHGUEST:
				noteStr = errStr.ssid2GVisSame;
				break;
			case E_WL5GSSIDBLANK:
				noteStr = errStr.ssidEmpty5G;
				break;
			case E_WL5GSSIDLEN:
				noteStr = errStr.ssidLength5G;
				break;
			case E_WL5GSSIDILLEGAL:
				noteStr = errStr.ssidInclSpeChar5G;
				break;
			case E_WL5GSSIDPWLEN:
				noteStr = errStr.ssidPwdLength5G;
				break;
			case E_WL5GSSIDPWILLEGAL:
				noteStr = errStr.ssidPwdInclSpeChar5G;
				break;
			case E_WL5GSSIDCONFICTWITHGUEST:
				noteStr = errStr.ssid5GVisSame;
				break;
			default:
				noteStr = errStr.unknownErr + code;
				break;
			}
		}else{
			switch(code){
			case E_NONE:
				return false;
			case E_WL2GSSIDBLANK:
			case E_WL5GSSIDBLANK:
				noteStr = errStr.ssidEmpty;
				break;
			case E_WL2GSSIDLEN:
			case E_WL5GSSIDLEN:
				noteStr = errStr.ssidLength;
				break;
			case E_WL2GSSIDILLEGAL:
			case E_WL5GSSIDILLEGAL:
				noteStr = errStr.ssidInclSpeChar;
				break;
			case E_WL2GSSIDPWLEN:
			case E_WL5GSSIDPWLEN:
				noteStr = errStr.ssidPwdLength;
				break;
			case E_WL2GSSIDPWILLEGAL:
			case E_WL5GSSIDPWILLEGAL:
				noteStr = errStr.ssidPwdInclSpeChar;
				break;
			case E_WL2GSSIDCONFICTWITHGUEST:
			case E_WL5GSSIDCONFICTWITHGUEST:
				noteStr = errStr.ssidVisSame;
				break;
			default:
				noteStr = errStr.unknownErr + code;
				break;
			}
		}

		showNote(noteStr);

		return true;
	}

	function checkSsid2G(ssid){
		var result = checkSsid(ssid)

		if (result == E_SSID_BLANK){
			return E_WL2GSSIDBLANK;
		}

		if (result == E_SSID_LEN){
			return E_WL2GSSIDLEN;
		}

		return E_NONE;
	}

	function checkPwd2G(password){
		var result = checkWlanPwd(password)

		if ("" == password){
			return E_NONE;
		}

		if (result == E_WIFI_PWD_LEN){
			return E_WL2GSSIDPWLEN;
		}

		if (result == E_WIFI_PWD_ILLEGAL){
			return E_WL2GSSIDPWILLEGAL;
		}

		return E_NONE;
	}

	function checkSsid5G(ssid){
		var result = checkSsid(ssid)

		if (result == E_SSID_BLANK){
			return E_WL5GSSIDBLANK;
		}

		if (result == E_SSID_LEN){
			return E_WL5GSSIDLEN;
		}

		return E_NONE;
	}

	function checkPwd5G(password){
		var result = checkWlanPwd(password)

		if ("" == password){
			return E_NONE;
		}

		if (result == E_WIFI_PWD_LEN){
			return E_WL5GSSIDPWLEN;
		}

		if (result == E_WIFI_PWD_ILLEGAL){
			return E_WL5GSSIDPWILLEGAL;
		}

		return E_NONE;
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="title">{%helpStr.ssid%}</li>
		<li class="content">{%helpStr.ssidTip%}</li>
		<li class="title">{%helpStr.wifiPwd%}</li>
		<li class="content">{%helpStr.wifiPwdTip%}</li>
		<li class="title">{%helpStr.ssidHide%}</li>
		<li class="content">{%helpStr.ssidHideTip%}</li>
		<li class="title">{%helpStr.channel%}</li>
		<li class="content">{%helpStr.channelTip%}</li>
		<li class="title">{%helpStr.wifiMode%}</li>
		<li class="content">{%helpStr.wifiModeTip%}</li>
		<li class="title">{%helpStr.bandWidth%}</li>
		<li class="content">{%helpStr.bandWidthTip%}</li>
		<li class="title">{%helpStr.apIsolate%}</li>
		<li class="content">{%helpStr.apIsolateTip%}</li>
	</ul>
</div>
<div class="set-con">
	<ul class="set-con set-con-top hidden">
		<div class="switch-con switch-con-height">
			<label class="desc-title">{%label.twoInone%}</label>
			<div class="set-con-middle">
				<span id="Two2One" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</div>
		</div>
		<p class="desc-tetail underline desc-color">{%label.wifiRemark%}</p>
	</ul>
	<ul class="set-con">
		<label class="desc-title" id="WifiName">{%label.wireless2G%}</label>
		<div class="set-con-middle">
			<span id="Switch2G" class="switch">
				<i class="switch-circle icon_select_off"></i>
			</span>
		</div>
	</ul>
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl" for="Ssid2G">{%label.wirelessName%}</label>
			<input id="Ssid2G" class="text hover" maxLength="32" value="" />
		</li>
	</ul>
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl" for="Pwd2G">{%label.wifiPwd%}</label>
			<input id="Pwd2G" class="text hover" type="password" maxLength="63" value="" /><i class="tip icon-eye" data-value="0"></i>
		</li>
	</ul>
	<ul class="set-con">
		<label class="desc-title">{%label.hideSsid%}</label>
		<div class="set-con-middle">
			<span id="HideSsid2G" class="switch">
				<i class="switch-circle icon_select_off"></i>
			</span>
		</div>
	</ul>
	<div id="Wifi5G">
		<ul class="set-con ul-border"></ul>
		<ul class="set-con set-con-middle">
			<label class="desc-title">{%label.wireless5G%}</label>
			<div class="set-con-middle">
				<span id="Switch5G" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</div>
		</ul>
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl" for="Ssid5G">{%label.wirelessName%}</label>
				<input id="Ssid5G" class="text hover" maxLength="32" value="" />
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl" for="Pwd5G">{%label.wifiPwd%}</label>
				<input id="Pwd5G" class="text hover" type="password" maxLength="63" value="" /><i class="tip icon-eye" data-value="0"></i>
			</li>
		</ul>
		<ul class="set-con">
			<label class="desc-title">{%label.hideSsid%}</label>
			<div class="set-con-middle">
				<span id="HideSsid5G" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</div>
		</ul>
	</div>
	<div class="err-note hidden">
		<i class="err-icon icon_remind_line"></i>
		<p class="note-str"></p>
	</div>
	<ul id="OptionSenior" class="set-con high-con">
		<img class="high-tip" src="/luci-static/images/pic_computer.png?_=20170809165512" />
		<div class="switch-con high-top">
			<label class="desc-title high-left">{%label.seniorSet%}</label>
			<div class="set-con-middle">
				<span id="SeniorSet" class="high-set">{%label.openSenior%}</span>
			</div>
		</div>
	</ul>
	<div id="WirelessSenior" class="hidden">
		<div id="Senior2G" class="hidden">
			<ul class="set-con">
				<label class="desc-title wifi-title">{%label.wifiSet2G%}</label>
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl">{%label.wifiMode%}</label>
						<span id="WifiMode2G" class="select">
							<span class="value sel-value"></span>
							<i class="tip icon_list-expansion"></i>
						</span>
					</li>
				</ul>
			</ul>
			<ul class="set-con">
				<li class="text-con">
					<label class="desc-lbl">{%label.channel%}</label>
					<span id="Channel2G" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con">
				<li class="text-con">
					<label class="desc-lbl">{%label.bandWidth%}</label>
					<span id="BandWidth2G" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con ul-bottom">
				<label class="desc-title">{%label.apIsolation%}</label>
				<div class="set-con-middle">
					<span id="WifiIsolation2G" class="switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</div>
			</ul>
		</div>
		<div id="Senior5G" class="hidden">
			<ul class="set-con">
				<label class="desc-title wifi-title">{%label.wifiSet5G%}</label>
				<ul class="set-con">
					<li class="text-con">
						<label class="desc-lbl">{%label.wifiMode%}</label>
						<span id="WifiMode5G" class="select">
							<span class="value sel-value"></span>
							<i class="tip icon_list-expansion"></i>
						</span>
					</li>
				</ul>
			</ul>
			<ul class="set-con">
				<li class="text-con">
					<label class="desc-lbl">{%label.channel%}</label>
					<span id="Channel5G" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con">
				<li class="text-con">
					<label class="desc-lbl">{%label.bandWidth%}</label>
					<span id="BandWidth5G" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con ul-bottom">
				<label class="desc-title">{%label.apIsolation%}</label>
				<div class="set-con-middle">
					<span id="WifiIsolation5G" class="switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</div>
			</ul>
		</div>
	</div>
	<div id="SaveWifi" class="btn-con">
		<input id="Save" class="btn btn-save" type="button" value="{%btn.save%}" />
	</div>
</div>